<!--
 * @Author: liming
 * @Date: 2021-04-06 11:12:10
 * @LastEditTime: 2021-04-06 11:12:30
 * @FilePath: \05-Vue路由通用项目\text.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* align-items: flex-end; */
            /* 这样写会让三个子盒子一起沿着侧轴底侧对齐(从下到上) */
            /* 我们想只让3个盒子下来底侧 */
            /* 这个时候我们就不能给父亲加align-items了，父亲一加所有的都会下来 */
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin-right: 10px;
        }

        div span:nth-child(3) {
            /* 3号盒子自己要单独脱离阻止 */
            align-self: flex-end;
            /* align表示对齐，self表示我自己 */
        }

        div span:nth-child(2) {
            /* 注意我们没有动结构，我们通过CSS来控制了元素的位置 */
            /* 默认是0，-1比0小，所以在前面 */
            order: -1;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>
